<template>
    <div class="app-container">
        <div v-if="isShow">
            <storage-customer-info :value="detailInfo"></storage-customer-info>
            <storage-out-car-info :value="detailInfo"></storage-out-car-info>
        </div>

        <CommonContainer title="出库信息">
            <el-form ref="form" :model="form" :rules="rules" label-width="80px" label-position="top">
                <el-row :gutter="10">
                    <el-col :span="8">
                        <el-form-item label="出库时间" prop="outStorageTime">
                            <el-date-picker
                                style="width: 100%"
                                v-model="form.outStorageTime"
                                value-format="yyyy-MM-dd"
                                format="yyyy-MM-dd"
                                type="datetime"
                                placeholder="选择出库时间">
                            </el-date-picker>
                        </el-form-item>

                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="出库里程(km)" prop="outboundMileage">
                            <el-input v-model="form.outboundMileage" placeholder="请输入出库里程"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="出库油量(%)" prop="outboundOilQuantity">
                            <el-input v-model="form.outboundOilQuantity" placeholder="请输入出库油量"></el-input>
                        </el-form-item>
                    </el-col>


                    <el-col :span="8">
                        <el-form-item label="上传交车单" prop="deliveryNoteOss">
                         <image-common v-model="form.deliveryNoteOss" :up-type="2" :limit="1" info="交车单"></image-common>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="出库里程表" prop="outboundMileageOss">
                         <image-common v-model="form.outboundMileageOss" :up-type="2" :limit="1" info="里程表"></image-common>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="出库油量表" prop="outboundOilQuantityOss">
                         <image-common v-model="form.outboundOilQuantityOss" :up-type="2" :limit="1" info="油量表"></image-common>
                        </el-form-item>
                    </el-col>

                    <el-col :span="24">
                        <el-form-item label="备注" prop="remark">
                            <el-input type="textarea" placeholder="若有新车前替车场景，请在备注中填写替车时效并上传有关附件" v-model="form.remark" maxlength="500" :rows="5" show-word-limit></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="附件" prop="attachmentOss">
                            <div class="flex">
                                <image-common :up-type="2" info="上传附件" :limit="20" v-model="form.attachmentOss"></image-common>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </CommonContainer>
        <div class="card-wrap flex justify-end card-padding">
            <el-button @click="cancel">取消</el-button>
            <el-button type="primary" @click="submitForm(1)">保存</el-button>
            <el-button type="primary" @click="submitForm(2)">提交审批</el-button>
        </div>
    </div>
</template>

<script>
import StorageCustomerInfo from "@/views/carInventory/components/StorageCustomerInfo.vue";
import StorageOutCarInfo from "@/views/carInventory/components/StorageOutCarInfo.vue";
import * as outInventoryApi from "@/api/carInventory/outInventory";
export default {
    components: {StorageOutCarInfo, StorageCustomerInfo},
    props: {},
    data() {
        return {
            detailInfo:{},
            form:{
                outboundId:this.$route.query.id,//入库id
                outboundMileage:null,//出库里程
                outboundMileageOss:null,//出库里程附件
                outboundOilQuantity:null,//入库油量
                outboundOilQuantityOss:null,//出库油量附件
                attachmentOss:null,//附件
                remark:null,//备注,
                saveFlag:0,
                outStorageTime:null,//出库时间
            },
            rules: {
                outboundMileage: [
                    {required: true, message: '请输入出库里程', trigger: 'blur'},
                    { pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '请输⼊正确的格式,可保留两位⼩数' }
                ],
                outboundMileageOss: [
                    {required: true, message: '请上传出库里程表照片', trigger: 'blur'},
                ],
                outStorageTime: [
                    {required: true, message: '请选择出库时间', trigger: 'change'},
                ],
                outboundOilQuantity: [
                    {required: true, message: '请输入出库油量', trigger: 'change'},
                    { pattern: /^[0-9]*$/, message: '请输入正整数' }
                ],
                outboundOilQuantityOss: [
                    {required: true, message: '请上传出库油量照片', trigger: 'blur'},
                ],
                deliveryNoteOss:[
                    {required: true, message: '请上传上传交车单', trigger: 'blur'},
                ]

            },
            viewType:0, //0:新增 1.编辑
            isShow:false,
        }
    },
    computed: {},
    methods: {

        // 获取入库单详情
        getDetail(){
            outInventoryApi.outStorageDetails(this.form.outboundId).then(res=>{
                this.detailInfo = {...res.data,inboundId:this.$route.query.inboundId}
                this.form = res.data.carOutStorage
                this.isShow = true
                
            })
        },
        //保存|提交
        submitForm(type){
            this.form.saveFlag=type;
            if (type == 1){//保存
                this.insertCarOutStorage()
                // if (this.viewType == 1){//编辑
                //     this.updateCarOutStorage()
                // }else{//新增

                // }
            }else if(type == 2){//提交审批
              this.commitApproval()
            }
        },
        //提交审批
        commitApproval(){
            this.$refs['form'].validate((valid) => {
                if (valid) {
                   this.submitOutStorage()
                }
            })
        },
        //保存
        insertCarOutStorage(){
            const loading = this.$loading({
              lock: true,
              text: "保存中",
              spinner: "el-icon-loading",
              background: "rgba(0, 0, 0, 0.7)",
            });
            outInventoryApi.insertCarOutStorage({...this.detailInfo,...this.form})
                .then(res=>{
                    if (res.code == 200){
                        loading.close();
                        this.cancel()
                    }
                })
                .catch(() => {
                        loading.close();
                });
        },
        //编辑
        submitOutStorage(){
            const loading = this.$loading({
              lock: true,
              text: "提交中",
              spinner: "el-icon-loading",
              background: "rgba(0, 0, 0, 0.7)",
            });
            outInventoryApi.submitOutStorage({...this.detailInfo,...this.form})
                .then(res=>{
                    if (res.code == 200){
                        loading.close();
                        this.cancel()
                    }
                })
                .catch(() => {
                        loading.close();
                });
        },
        cancel(){
            this.$router.back()
        },


    },
    mounted() {
        this.getDetail()
    },

}
</script>

<style lang="scss" scoped>

::v-deep .el-form--label-top .el-form-item__label {
    padding: 0;
}

.el-form-item {
    margin-bottom: 15px;
    width: 70%;
}
</style>
